import React from 'react';
import ReactNative, {
  View,
  Image,
  Text,
  ListView,
  TextInput,
  Button,
  TouchableOpacity,
  Keyboard,
  ScrollView,
  Platform,
  Picker,
  Alert,
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import ToastUtils from '../../common/ToastUtils';
import dismissKeyboard from 'dismissKeyboard';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import HeartLoveRquestDeleteSelfDataAction from '../../actions/heart/HeartLoveRquestDeleteSelfDataAction';
import CommonShowPickerAction from '../../actions/common/CommonShowPickerAction';
export default class HeartLoveDeletePage extends BasePage {
  constructor(props) {
    super(props);
    
   this.tag1 = [{key:0,value:"未填"},{key:1,value:"是"},{key:2,value:"否"}];
   this.tag2 = [{key:0,value:"未填"},{key:1,value:"是"},{key:2,value:"否"}];
   this.state = {
      feel_comprehensive: this.tag1[0],
      found_lover: this.tag2[0],
      suggestion: "",
      viewStatus: 1,
      keyboardHeight:0,
      };

    this._sendRequest = false;
    this._goEdit = false;
  }


  componentWillUnmount() {
  }

  componentWillUpdate(nextProps, nextStates) {
    if(nextStates.commitDataFinish && this._sendRequest) {
      new CommonShowViewFullScreenAction().call(this, null);
      this._resetState();
      nextStates.commitDataFinish = false;
      this._sendRequest = false;
      Alert.alert('提示',nextStates.statusText,[
          {text:'确定',onPress:()=>{if(nextStates.isSucceed) this.goBack()}}
        ])
    }
  
    return true;
  }

    _dealEnterPage() {
    if(this.state.expertData != this.props.pageData.routeData){
      this.state.expertData = this.props.pageData.routeData;
    }
  }

   _dealLeavePage() {
    if(this._goEdit === true) {
      return;
    }
    this._resetState();
  }

  _resetState() {
    this.setState({
      feel_comprehensive: 0,
      found_lover: 0,
      suggestion: "",
    })
  }

   //选择分类
  _renderTag1() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}
            onPress={this._onPressChooseTag1.bind(this)}>

          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            服务提供是否全面:  {this.state.feel_comprehensive.value}
          </Text>
        </TouchableOpacity>)
    }
    else{
       return (
       <View style={{flexDirection: 'row', alignItems: 'center',
            borderColor:"#eeeeee", 
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          服务提供是否全面:
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.feel_comprehensive.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPickerTag1Callback(value)}>
            {this.tag1.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item.value}
                  label={item.value}
                />
              )}
            )}

          </Picker></View></View>)
        }

  }



    _onPressChooseTag1() {
      let tagArr = [];
    for (var i = 0; i < this.tag1.length; i++) {
      tagArr.push(this.tag1[i].value);
    }

    new CommonShowPickerAction().call(this, {pickerData:tagArr,
      callback:this._onPickerTag1Callback.bind(this)});
  }

  _onPickerTag1Callback(selectedValue){
      let selectedData = [];
    for (var i = 0; i < this.tag1.length; i++) {
      if(selectedValue == this.tag1[i].value) {
        selectedData = this.tag1[i];
        break;
      }
    }
    this.setState({
      feel_comprehensive:selectedData,
    });
  }

   //选择分类
  _renderTag2() {
     if(Platform.OS === "ios"){
       return  (<TouchableOpacity style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}
            onPress={this._onPressChooseTag2.bind(this)}>

          <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
            是否已找到对象:  {this.state.found_lover.value}
          </Text>
        </TouchableOpacity>)
    }
    else{
       return (
       <View style={{flexDirection: 'row',alignItems:"center",
            borderColor:"#eeeeee", 
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(32)}}>
          是否已找到对象:
        </Text>
        <View style={{width:SizeUtils.translateDesignWidthToCode(300)}}>
       <Picker
            style={{backgroundColor:"#ffffff00"}}
            selectedValue={this.state.found_lover.value}
            mode="dialog"
            prompt={'请选择'}
            onValueChange={(value) => this._onPickerTag2Callback(value)}>
            {this.tag2.map((item, index) =>
              {return(
                <Picker.Item
                style={{fontSize:SizeUtils.translateFontSizeToCode(32),color:'#eeeeee'}}
                  key={index}
                  value={item.value}
                  label={item.value}
                />
              )}
            )}

          </Picker></View></View>)
        }

  }

    _onPressChooseTag2() {
          let tagArr = [];
    for (var i = 0; i < this.tag2.length; i++) {
      tagArr.push(this.tag2[i].value);
    }


    new CommonShowPickerAction().call(this, {pickerData:tagArr,
      callback:this._onPickerTag2Callback.bind(this)});
  }

  _onPickerTag2Callback(selectedValue){
      let selectedData = [];
    for (var i = 0; i < this.tag2.length; i++) {
      if(selectedValue == this.tag2[i].value) {
        selectedData = this.tag2[i];
        break;
      }
    }
    this.setState({
      found_lover:selectedData,
    });
  }

  _itemQuestion(){
    return(
      <View style={{
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ 
                flexWrap: 'nowrap', 
                height: SizeUtils.translateDesignHeightToCode(32), }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>问题：</Text>
            </View>
            <TouchableOpacity style={{backgroundColor:"#ffffff", width:SizeUtils.translateDesignWidthToCode(670),
                marginTop:SizeUtils.translateDesignHeightToCode(44), borderColor:"#eeeeee",
                borderWidth:SizeUtils.translateDesignNumToCode(3)}} onPress={this._onPressUploadText.bind(this)}>
              <Text style={{color:this.state.suggestion === "" ? "#cacacc" : "#999999",
                  fontSize:SizeUtils.translateFontSizeToCode(30),
                  padding:SizeUtils.translateDesignHeightToCode(20),
                  height:SizeUtils.translateDesignHeightToCode(550), }}>
                  {this.state.suggestion === "" ? "请输入你的建议 ": this.state.suggestion}
              </Text>
            </TouchableOpacity>
        </View>
    )
  }

    _onPressUploadText() {
    this._goEdit = true;
    this.gotoPage(Config.pages.common_input, {placeholder:"请输入你的建议", length:[10, 500],
      callback:this._editUploadText.bind(this), title:"建议"});
  }

  _editUploadText(value) {
    this._goEdit = false;
    this.setState({
      suggestion:value,
    })
  }

  _onPressSubmit(){
    if(this.state.suggestion === ""){
       ToastUtils.show("请输入建议");
    }
    else {
      this._callCreateSuggest()
    }
  }

  _callCreateSuggest() {
    new HeartLoveRquestDeleteSelfDataAction().call(this, {
      suggestion: this.state.suggestion,
      found_lover: this.state.found_lover.key,
      feel_comprehensive: this.state.feel_comprehensive.key,});
    this._sendRequest = true;
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().height,
         paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(20), alignItems: 'center', backgroundColor:"#ffffff"}}>
         {this._renderNavigationBar()}
         <ScrollView style={{width:SizeUtils.getWindowSize().width,
         }} ref={(ref) => this._scrollView = ref}>
            <View style={{flexDirection: 'column',alignItems: "center", backgroundColor:"#ffffff",
            width:SizeUtils.getWindowSize().width,
            }}>
            {this._renderTag1()}
            {this._renderTag2()}
            {this._itemQuestion()}
          </View>
         </ScrollView>
     
           <TouchableOpacity
            style={{
              width:SizeUtils.getWindowSize().width,
              backgroundColor: '#D93338',
            height:SizeUtils.translateDesignHeightToCode(80)
            }}
            onPress={this._onPressSubmit.bind(this)}
           >
             <Text style={{
                textAlign: 'center',
                color: '#ffffff',
                 paddingTop:SizeUtils.translateDesignWidthToCode(18),
                fontSize:SizeUtils.translateFontSizeToCode(32),
              }}>删除</Text>
           </TouchableOpacity>
      </View>
    )
  }
}
